{% extends "base.html" %}

{% block title %}首页 - 数据预处理系统{% endblock %}

{% block content %}
<div class="row">
    <!-- 欢迎区域 -->
    <div class="col-12 mb-4">
        <div class="card border-0 shadow-sm bg-primary text-white">
            <div class="card-body text-center py-5">
                <i class="fas fa-database fa-3x mb-3"></i>
                <h1 class="card-title">数据预处理系统</h1>
                <p class="card-text lead">智能化的数据库结构导出与AI辅助分析平台</p>
                <a href="{{ url_for('export_page') }}" class="btn btn-light btn-lg">
                    <i class="fas fa-rocket me-2"></i>开始使用
                </a>
            </div>
        </div>
    </div>

    <!-- 功能特性 -->
    <div class="col-12 mb-4">
        <h2 class="text-center mb-4">
            <i class="fas fa-star text-warning me-2"></i>核心功能
        </h2>
        
        <div class="row g-4">
            <div class="col-md-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon bg-primary text-white rounded-circle mx-auto mb-3">
                            <i class="fas fa-plug fa-2x"></i>
                        </div>
                        <h5 class="card-title">多数据库连接</h5>
                        <p class="card-text text-muted">
                            支持MySQL、PostgreSQL、SQL Server、Oracle等主流数据库，
                            提供统一的连接管理和监控。
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon bg-success text-white rounded-circle mx-auto mb-3">
                            <i class="fas fa-file-excel fa-2x"></i>
                        </div>
                        <h5 class="card-title">整库导出</h5>
                        <p class="card-text text-muted">
                            一键导出完整数据库结构，包括表信息、字段详情、
                            约束关系等，生成标准化Excel文档。
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon bg-info text-white rounded-circle mx-auto mb-3">
                            <i class="fas fa-robot fa-2x"></i>
                        </div>
                        <h5 class="card-title">AI智能增强</h5>
                        <p class="card-text text-muted">
                            集成本地/云端大模型，智能补全表注释和字段说明，
                            自动分析业务关系和数据流向。
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon bg-warning text-white rounded-circle mx-auto mb-3">
                            <i class="fas fa-palette fa-2x"></i>
                        </div>
                        <h5 class="card-title">智能标识</h5>
                        <p class="card-text text-muted">
                            AI生成内容自动着色标识，清晰区分人工和AI补全的内容，
                            提供完整的追溯记录。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 快速开始 -->
    <div class="col-12 mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light">
                <h4 class="card-title mb-0">
                    <i class="fas fa-play-circle text-success me-2"></i>快速开始
                </h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5><i class="fas fa-list-ol text-primary me-2"></i>使用步骤</h5>
                        <ol class="list-group list-group-numbered">
                            <li class="list-group-item border-0 ps-0">
                                <strong>配置数据库连接</strong>
                                <p class="text-muted mb-0">添加您的数据库连接信息，支持多种数据库类型</p>
                            </li>
                            <li class="list-group-item border-0 ps-0">
                                <strong>设置AI模型</strong>
                                <p class="text-muted mb-0">配置本地或云端AI模型，用于智能分析和补全</p>
                            </li>
                            <li class="list-group-item border-0 ps-0">
                                <strong>执行导出任务</strong>
                                <p class="text-muted mb-0">选择导出选项，一键生成完整的数据库文档</p>
                            </li>
                            <li class="list-group-item border-0 ps-0">
                                <strong>下载结果文件</strong>
                                <p class="text-muted mb-0">获取格式化的Excel文档，包含AI增强的注释</p>
                            </li>
                        </ol>
                    </div>
                    <div class="col-md-6">
                        <h5><i class="fas fa-link text-primary me-2"></i>快捷操作</h5>
                        <div class="d-grid gap-2">
                            <a href="{{ url_for('database_config') }}" class="btn btn-outline-primary">
                                <i class="fas fa-server me-2"></i>配置数据库连接
                            </a>
                            <a href="{{ url_for('ai_config') }}" class="btn btn-outline-success">
                                <i class="fas fa-robot me-2"></i>设置AI模型
                            </a>
                            <a href="{{ url_for('export_page') }}" class="btn btn-primary">
                                <i class="fas fa-download me-2"></i>开始导出数据
                            </a>
                            <a href="{{ url_for('tasks_page') }}" class="btn btn-outline-info">
                                <i class="fas fa-tasks me-2"></i>查看任务状态
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统状态 -->
    <div class="col-md-6 mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fas fa-chart-line text-info me-2"></i>系统状态
                </h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-4">
                        <div class="stat-item">
                            <h3 class="text-primary mb-1" id="db-count">0</h3>
                            <small class="text-muted">数据库连接</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="stat-item">
                            <h3 class="text-success mb-1" id="ai-count">0</h3>
                            <small class="text-muted">AI模型</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="stat-item">
                            <h3 class="text-warning mb-1" id="task-count">0</h3>
                            <small class="text-muted">活跃任务</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近任务 -->
    <div class="col-md-6 mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fas fa-clock text-secondary me-2"></i>最近任务
                </h5>
                <a href="{{ url_for('tasks_page') }}" class="btn btn-sm btn-outline-primary">查看全部</a>
            </div>
            <div class="card-body">
                <div id="recent-tasks" class="task-list">
                    <p class="text-muted text-center">暂无任务记录</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 加载系统状态
    loadSystemStatus();
    // 加载最近任务
    loadRecentTasks();
    
    // 定时刷新
    setInterval(function() {
        loadSystemStatus();
        loadRecentTasks();
    }, 30000); // 30秒刷新一次
});

function loadSystemStatus() {
    // 加载数据库配置数量
    $.get('/api/database/configs')
        .done(function(data) {
            if (data.success) {
                $('#db-count').text(data.configs.length);
            }
        });
    
    // 加载AI配置数量
    $.get('/api/ai/configs')
        .done(function(data) {
            if (data.success) {
                $('#ai-count').text(data.configs.length);
            }
        });
    
    // 加载任务数量
    $.get('/api/tasks')
        .done(function(data) {
            if (data.success) {
                const activeTasks = data.tasks.filter(task => 
                    ['starting', 'connecting', 'extracting', 'loading_ai', 'enhancing', 'exporting'].includes(task.status)
                );
                $('#task-count').text(activeTasks.length);
            }
        });
}

function loadRecentTasks() {
    $.get('/api/tasks')
        .done(function(data) {
            if (data.success && data.tasks.length > 0) {
                const recentTasks = data.tasks
                    .sort((a, b) => new Date(b.start_time) - new Date(a.start_time))
                    .slice(0, 3);
                
                let html = '';
                recentTasks.forEach(task => {
                    const statusClass = getStatusClass(task.status);
                    const statusIcon = getStatusIcon(task.status);
                    
                    html += `
                        <div class="task-item border-bottom pb-2 mb-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="badge bg-${statusClass}">
                                        <i class="${statusIcon} me-1"></i>${getStatusText(task.status)}
                                    </span>
                                    <small class="text-muted ms-2">${task.db_config}</small>
                                </div>
                                <small class="text-muted">${formatTime(task.start_time)}</small>
                            </div>
                            <div class="mt-1">
                                <small class="text-muted">${task.message}</small>
                            </div>
                        </div>
                    `;
                });
                
                $('#recent-tasks').html(html);
            }
        });
}

function getStatusClass(status) {
    const statusMap = {
        'starting': 'secondary',
        'connecting': 'info',
        'extracting': 'warning',
        'loading_ai': 'info',
        'enhancing': 'primary',
        'exporting': 'warning',
        'completed': 'success',
        'failed': 'danger'
    };
    return statusMap[status] || 'secondary';
}

function getStatusIcon(status) {
    const iconMap = {
        'starting': 'fas fa-play',
        'connecting': 'fas fa-link',
        'extracting': 'fas fa-database',
        'loading_ai': 'fas fa-robot',
        'enhancing': 'fas fa-magic',
        'exporting': 'fas fa-file-export',
        'completed': 'fas fa-check',
        'failed': 'fas fa-times'
    };
    return iconMap[status] || 'fas fa-question';
}

function getStatusText(status) {
    const textMap = {
        'starting': '启动中',
        'connecting': '连接中',
        'extracting': '提取中',
        'loading_ai': '加载AI',
        'enhancing': '增强中',
        'exporting': '导出中',
        'completed': '已完成',
        'failed': '失败'
    };
    return textMap[status] || '未知';
}

function formatTime(timeStr) {
    const date = new Date(timeStr);
    const now = new Date();
    const diff = now - date;
    
    if (diff < 60000) {
        return '刚刚';
    } else if (diff < 3600000) {
        return Math.floor(diff / 60000) + '分钟前';
    } else if (diff < 86400000) {
        return Math.floor(diff / 3600000) + '小时前';
    } else {
        return date.toLocaleDateString();
    }
}
</script>
{% endblock %}